<template>
  <view class="job-publish-page">
    <view class="form-container">
      <!-- 岗位类型选择 -->
      <view class="form-section">
        <view class="section-title required">岗位类型</view>
        <view class="job-type-tabs">
          <view 
            class="type-tab" 
            :class="{ active: formData.jobType === 'normal' }"
            @click="selectJobType('normal')"
          >
            <text>普通岗位</text>
          </view>
          <view 
            class="type-tab" 
            :class="{ active: formData.jobType === 'shift' }"
            @click="selectJobType('shift')"
          >
            <text>抢班岗位</text>
          </view>
        </view>
      </view>

      <!-- 职位标题 -->
      <view class="form-section">
        <view class="section-title required">职位标题</view>
        <input 
          class="form-input" 
          type="text" 
          placeholder="请输入职位标题" 
          v-model="formData.title"
          maxlength="50"
        />
      </view>

      <!-- 职位分类 -->
      <view class="form-section">
        <view class="section-title required">职位分类</view>
        <view class="picker-wrapper" @click="openCategoryPicker">
          <input 
            class="form-input" 
            type="text" 
            placeholder="请选择职位分类" 
            v-model="categoryName"
            readonly
            disabled
          />
          <text class="iconfont icon-ic_rightarrow picker-arrow"></text>
        </view>
      </view>

      <!-- 薪资设置 -->
      <view class="form-section">
        <view class="section-title required">薪资设置</view>
        <view class="salary-type-tabs">
          <view 
            class="salary-tab" 
            :class="{ active: formData.salaryType === 'fixed' }"
            @click="selectSalaryType('fixed')"
          >
            <text>固定薪资</text>
          </view>
          <view 
            class="salary-tab" 
            :class="{ active: formData.salaryType === 'range' }"
            @click="selectSalaryType('range')"
          >
            <text>范围薪资</text>
          </view>
        </view>
        <view class="salary-input-group">
          <view class="salary-input-wrapper">
            <text class="salary-symbol">¥</text>
            <input 
              class="form-input salary-input" 
              type="digit" 
              :placeholder="formData.salaryType === 'fixed' ? '请输入薪资' : '最低薪资'" 
              v-model="formData.salaryMin"
            />
            <text class="salary-unit">/{{ formData.salaryUnit }}</text>
          </view>
          <view class="salary-input-wrapper" v-if="formData.salaryType === 'range'">
            <text class="salary-separator">-</text>
            <text class="salary-symbol">¥</text>
            <input 
              class="form-input salary-input" 
              type="digit" 
              placeholder="最高薪资" 
              v-model="formData.salaryMax"
            />
            <text class="salary-unit">/{{ formData.salaryUnit }}</text>
          </view>
        </view>
        <view class="salary-options">
          <view 
            class="salary-option" 
            v-for="(unit, index) in salaryUnits" 
            :key="index"
            :class="{ active: formData.salaryUnit === unit }"
            @click="selectSalaryUnit(unit)"
          >
            <text>{{ unit }}</text>
          </view>
        </view>
      </view>

      <!-- 工作地点 -->
      <view class="form-section">
        <view class="section-title required">工作地点</view>
        <view class="location-input-wrapper">
          <text class="iconfont-v2 icon-dingwei location-icon"></text>
          <input 
            class="form-input location-input" 
            type="text" 
            placeholder="请输入详细地址" 
            v-model="formData.location"
          />
        </view>
      </view>

      <!-- 工作日期和时段 -->
      <view class="form-section">
        <view class="section-title required">工作日期</view>
        <input 
          class="form-input" 
          type="text" 
          placeholder="如：每周工作天数2-3天" 
          v-model="formData.workDays"
        />
      </view>

      <view class="form-section">
        <view class="section-title required">工作时段</view>
        <input 
          class="form-input" 
          type="text" 
          placeholder="如：09:00-22:00" 
          v-model="formData.workTime"
        />
      </view>

      <!-- 职位要求 -->
      <view class="form-section">
        <view class="section-title">职位要求</view>
        <view class="requirement-group">
          <view class="requirement-item">
            <view class="requirement-label">性别要求</view>
            <view class="requirement-options">
              <view 
                class="requirement-option" 
                v-for="(option, index) in genderOptions" 
                :key="index"
                :class="{ active: formData.gender === option.value }"
                @click="selectGender(option.value)"
              >
                <text>{{ option.label }}</text>
              </view>
            </view>
          </view>
          <view class="requirement-item">
            <view class="requirement-label">年龄要求</view>
            <input 
              class="form-input requirement-input" 
              type="text" 
              placeholder="如：18-45岁" 
              v-model="formData.age"
            />
          </view>
          <view class="requirement-item">
            <view class="requirement-label">学历要求</view>
            <view class="picker-wrapper" @click="openEducationPicker">
              <input 
                class="form-input" 
                type="text" 
                placeholder="请选择学历要求" 
                v-model="educationName"
                readonly
                disabled
              />
              <text class="iconfont icon-ic_rightarrow picker-arrow"></text>
            </view>
          </view>
          <view class="requirement-item">
            <view class="requirement-label">经验要求</view>
            <view class="picker-wrapper" @click="openExperiencePicker">
              <input 
                class="form-input" 
                type="text" 
                placeholder="请选择经验要求" 
                v-model="experienceName"
                readonly
                disabled
              />
              <text class="iconfont icon-ic_rightarrow picker-arrow"></text>
            </view>
          </view>
        </view>
      </view>

      <!-- 职位描述 -->
      <view class="form-section">
        <view class="section-title required">职位描述</view>
        <textarea 
          class="form-textarea" 
          placeholder="请详细描述工作内容、要求等"
          v-model="formData.description"
          maxlength="1000"
        />
        <view class="char-count">{{ formData.description.length }}/1000</view>
      </view>

      <!-- 员工福利 -->
      <view class="form-section">
        <view class="section-title">员工福利</view>
        <view class="benefit-list">
          <view 
            class="benefit-item" 
            v-for="(benefit, index) in benefitOptions" 
            :key="index"
            :class="{ active: benefit.selected }"
            @click="toggleBenefit(index)"
          >
            <view class="benefit-checkbox" :class="{ active: benefit.selected }">
              <text v-if="benefit.selected" class="iconfont-v2 icon-dagou"></text>
            </view>
            <text class="benefit-text">{{ benefit.name }}</text>
          </view>
        </view>
      </view>

      <!-- 抢班岗位 - 班次信息 -->
      <view class="form-section" v-if="formData.jobType === 'shift'">
        <view class="section-header">
          <view class="section-title required">班次信息</view>
          <view class="add-shift-btn" @click="addShift">
            <text class="iconfont-v2 icon-jia add-icon"></text>
            <text>添加班次</text>
          </view>
        </view>
        
        <view class="shift-list">
          <view 
            class="shift-item" 
            v-for="(shift, index) in formData.shifts" 
            :key="index"
          >
            <view class="shift-header">
              <view class="shift-number">班次 {{ String(index + 1).padStart(2, "0") }}</view>
              <view class="shift-actions">
                <view class="action-icon" @click="editShift(index)">
                  <text class="iconfont-v2 icon-bianji"></text>
                </view>
                <view class="action-icon" @click="deleteShift(index)">
                  <text class="iconfont-v2 icon-shanchu"></text>
                </view>
              </view>
            </view>
            <view class="shift-content">
              <text class="shift-info">{{ shift.date }} {{ shift.time }}</text>
              <text class="shift-price">¥{{ shift.price }}</text>
            </view>
          </view>
        </view>
      </view>
    </view>

    <!-- 底部发布按钮 -->
    <view class="bottom-action-bar">
      <button class="publish-btn" @click="publishJob">发布岗位</button>
    </view>

    <!-- 分类选择器 -->
    <u-picker 
      :show="showCategoryPicker" 
      :columns="categoryColumns" 
      keyName="name"
      @confirm="confirmCategory"
      @cancel="showCategoryPicker = false"
    ></u-picker>

    <!-- 学历选择器 -->
    <u-picker 
      :show="showEducationPicker" 
      :columns="educationColumns" 
      keyName="name"
      @confirm="confirmEducation"
      @cancel="showEducationPicker = false"
    ></u-picker>

    <!-- 经验选择器 -->
    <u-picker 
      :show="showExperiencePicker" 
      :columns="experienceColumns" 
      keyName="name"
      @confirm="confirmExperience"
      @cancel="showExperiencePicker = false"
    ></u-picker>

    <!-- 班次编辑弹窗 -->
    <u-popup 
      :show="showShiftModal" 
      mode="bottom" 
      :round="20"
      height="auto"
      :z-index="10080"
      @close="closeShiftModal"
    >
      <view class="shift-modal">
        <view class="modal-header">
          <text class="modal-title">{{ editingShiftIndex >= 0 ? '编辑班次' : '添加班次' }}</text>
          <view class="modal-close" @click="closeShiftModal">
            <text class="iconfont-v2 icon-close"></text>
          </view>
        </view>
        <view class="modal-content">
          <view class="modal-section">
            <view class="modal-label required">日期</view>
            <input 
              class="modal-input" 
              type="text" 
              placeholder="如：10月19日 周日" 
              v-model="currentShift.date"
            />
          </view>
          <view class="modal-section">
            <view class="modal-label required">时段</view>
            <input 
              class="modal-input" 
              type="text" 
              placeholder="如：16:00-次日00:00" 
              v-model="currentShift.time"
            />
          </view>
          <view class="modal-section">
            <view class="modal-label required">薪资</view>
            <view class="price-input-wrapper">
              <text class="price-symbol">¥</text>
              <input 
                class="modal-input price-input" 
                type="digit" 
                placeholder="0" 
                v-model="currentShift.price"
              />
            </view>
          </view>
          <view class="modal-section">
            <view class="modal-label">工时（小时）</view>
            <input 
              class="modal-input" 
              type="number" 
              placeholder="如：5" 
              v-model.number="currentShift.hours"
            />
          </view>
          <view class="modal-section">
            <view class="modal-label">容量</view>
            <input 
              class="modal-input" 
              type="number" 
              placeholder="如：5" 
              v-model.number="currentShift.capacity"
            />
          </view>
        </view>
        <view class="modal-footer">
          <button class="modal-btn cancel-btn" @click="closeShiftModal">取消</button>
          <button class="modal-btn confirm-btn" @click="saveShift">保存</button>
        </view>
      </view>
    </u-popup>
  </view>
</template>

<script>
export default {
  data() {
    return {
      formData: {
        jobType: 'normal', // normal: 普通岗位, shift: 抢班岗位
        title: '',
        categoryId: 0,
        salaryType: 'fixed', // fixed: 固定薪资, range: 范围薪资
        salaryMin: '',
        salaryMax: '',
        salaryUnit: '天',
        location: '',
        workDays: '',
        workTime: '',
        gender: '不限',
        age: '',
        educationId: 0,
        experienceId: 0,
        description: '',
        benefits: [],
        shifts: [] // 仅抢班岗位使用
      },
      categoryName: '',
      educationName: '',
      experienceName: '',
      showCategoryPicker: false,
      showEducationPicker: false,
      showExperiencePicker: false,
      showShiftModal: false,
      editingShiftIndex: -1,
      currentShift: {
        date: '',
        time: '',
        price: '',
        hours: 0,
        capacity: 0
      },
      categoryList: [
        { id: 1, name: '酒店' },
        { id: 2, name: '餐饮' },
        { id: 3, name: '零售' },
        { id: 4, name: '物流' },
        { id: 5, name: '客服' },
        { id: 6, name: '销售' },
        { id: 7, name: '教育' },
        { id: 8, name: '其他' }
      ],
      educationList: [
        { id: 1, name: '不限' },
        { id: 2, name: '初中' },
        { id: 3, name: '高中' },
        { id: 4, name: '大专' },
        { id: 5, name: '本科' },
        { id: 6, name: '硕士' },
        { id: 7, name: '博士' }
      ],
      experienceList: [
        { id: 1, name: '不限' },
        { id: 2, name: '1年以下' },
        { id: 3, name: '1-3年' },
        { id: 4, name: '3-5年' },
        { id: 5, name: '5-10年' },
        { id: 6, name: '10年以上' }
      ],
      salaryUnits: ['天', '小时', '月', '年'],
      genderOptions: [
        { label: '不限', value: '不限' },
        { label: '男', value: '男' },
        { label: '女', value: '女' }
      ],
      benefitOptions: [
        { name: '当日结', selected: false },
        { name: '100元补贴', selected: false },
        { name: '高温补贴', selected: false },
        { name: '餐补', selected: false },
        { name: '交通补贴', selected: false },
        { name: '社保', selected: false }
      ]
    }
  },
  computed: {
    categoryColumns() {
      return [this.categoryList];
    },
    educationColumns() {
      return [this.educationList];
    },
    experienceColumns() {
      return [this.experienceList];
    }
  },
  methods: {
    // 选择岗位类型
    selectJobType(type) {
      this.formData.jobType = type;
      if (type === 'normal') {
        // 切换为普通岗位时，清空班次信息
        this.formData.shifts = [];
      }
    },
    
    // 选择薪资类型
    selectSalaryType(type) {
      this.formData.salaryType = type;
      if (type === 'fixed') {
        this.formData.salaryMax = '';
      }
    },
    
    // 选择薪资单位
    selectSalaryUnit(unit) {
      this.formData.salaryUnit = unit;
    },
    
    // 选择性别
    selectGender(gender) {
      this.formData.gender = gender;
    },
    
    // 切换福利
    toggleBenefit(index) {
      this.benefitOptions[index].selected = !this.benefitOptions[index].selected;
      this.updateBenefits();
    },
    
    // 更新福利数组
    updateBenefits() {
      this.formData.benefits = this.benefitOptions
        .filter(benefit => benefit.selected)
        .map(benefit => benefit.name);
    },
    
    // 打开分类选择器
    openCategoryPicker() {
      this.showCategoryPicker = true;
    },
    
    // 确认分类选择
    confirmCategory(e) {
      const idx = (e.indexs && e.indexs[0]) || 0;
      const item = this.categoryList[idx];
      if (item) {
        this.formData.categoryId = item.id;
        this.categoryName = item.name;
      }
      this.showCategoryPicker = false;
    },
    
    // 打开学历选择器
    openEducationPicker() {
      this.showEducationPicker = true;
    },
    
    // 确认学历选择
    confirmEducation(e) {
      const idx = (e.indexs && e.indexs[0]) || 0;
      const item = this.educationList[idx];
      if (item) {
        this.formData.educationId = item.id;
        this.educationName = item.name;
      }
      this.showEducationPicker = false;
    },
    
    // 打开经验选择器
    openExperiencePicker() {
      this.showExperiencePicker = true;
    },
    
    // 确认经验选择
    confirmExperience(e) {
      const idx = (e.indexs && e.indexs[0]) || 0;
      const item = this.experienceList[idx];
      if (item) {
        this.formData.experienceId = item.id;
        this.experienceName = item.name;
      }
      this.showExperiencePicker = false;
    },
    
    // 添加班次
    addShift() {
      this.editingShiftIndex = -1;
      this.currentShift = {
        date: '',
        time: '',
        price: '',
        hours: 0,
        capacity: 0
      };
      this.showShiftModal = true;
    },
    
    // 编辑班次
    editShift(index) {
      this.editingShiftIndex = index;
      const shift = this.formData.shifts[index];
      this.currentShift = {
        date: shift.date || '',
        time: shift.time || '',
        price: shift.price || '',
        hours: shift.hours || 0,
        capacity: shift.capacity || 0
      };
      this.showShiftModal = true;
    },
    
    // 删除班次
    deleteShift(index) {
      uni.showModal({
        title: '确认删除',
        content: '确定要删除这个班次吗？',
        success: (res) => {
          if (res.confirm) {
            this.formData.shifts.splice(index, 1);
          }
        }
      });
    },
    
    // 保存班次
    saveShift() {
      if (!this.currentShift.date || !this.currentShift.time || !this.currentShift.price) {
        uni.showToast({
          title: '请填写完整的班次信息',
          icon: 'none'
        });
        return;
      }
      
      if (this.editingShiftIndex >= 0) {
        // 编辑模式
        this.$set(this.formData.shifts, this.editingShiftIndex, { ...this.currentShift });
      } else {
        // 新增模式
        this.formData.shifts.push({ ...this.currentShift });
      }
      
      this.closeShiftModal();
    },
    
    // 关闭班次弹窗
    closeShiftModal() {
      this.showShiftModal = false;
      this.editingShiftIndex = -1;
      this.currentShift = {
        date: '',
        time: '',
        price: '',
        hours: 0,
        capacity: 0
      };
    },
    
    // 验证表单
    validateForm() {
      if (!this.formData.title.trim()) {
        uni.showToast({
          title: '请输入职位标题',
          icon: 'none'
        });
        return false;
      }
      
      if (this.formData.categoryId === 0) {
        uni.showToast({
          title: '请选择职位分类',
          icon: 'none'
        });
        return false;
      }
      
      if (!this.formData.salaryMin || parseFloat(this.formData.salaryMin) <= 0) {
        uni.showToast({
          title: '请输入有效的薪资',
          icon: 'none'
        });
        return false;
      }
      
      if (this.formData.salaryType === 'range' && (!this.formData.salaryMax || parseFloat(this.formData.salaryMax) <= parseFloat(this.formData.salaryMin))) {
        uni.showToast({
          title: '最高薪资必须大于最低薪资',
          icon: 'none'
        });
        return false;
      }
      
      if (!this.formData.location.trim()) {
        uni.showToast({
          title: '请输入工作地点',
          icon: 'none'
        });
        return false;
      }
      
      if (!this.formData.workDays.trim()) {
        uni.showToast({
          title: '请输入工作日期',
          icon: 'none'
        });
        return false;
      }
      
      if (!this.formData.workTime.trim()) {
        uni.showToast({
          title: '请输入工作时段',
          icon: 'none'
        });
        return false;
      }
      
      if (!this.formData.description.trim()) {
        uni.showToast({
          title: '请输入职位描述',
          icon: 'none'
        });
        return false;
      }
      
      // 抢班岗位必须至少有一个班次
      if (this.formData.jobType === 'shift' && this.formData.shifts.length === 0) {
        uni.showToast({
          title: '抢班岗位至少需要添加一个班次',
          icon: 'none'
        });
        return false;
      }
      
      return true;
    },
    
    // 发布岗位
    publishJob() {
      if (!this.validateForm()) {
        return;
      }
      
      console.log('发布岗位数据:', this.formData);
      
      // 这里应该调用API提交数据
      uni.showLoading({
        title: '发布中...'
      });
      
      // 模拟API调用
      setTimeout(() => {
        uni.hideLoading();
        uni.showToast({
          title: '岗位发布成功！',
          icon: 'success',
          duration: 2000
        });
        
        // 延迟返回上一页
        setTimeout(() => {
          uni.navigateBack();
        }, 2000);
      }, 1500);
    }
  }
}
</script>

<style lang="scss" scoped>
.job-publish-page {
  min-height: 100vh;
  background: #f5f5f5;
  padding-bottom: 160rpx;
}

.form-container {
  padding: 0 0 40rpx;
}

.form-section {
  background: white;
  margin-bottom: 20rpx;
  padding: 40rpx;
  
  .section-title {
    font-size: 32rpx;
    font-weight: 600;
    color: #333;
    margin-bottom: 24rpx;
    
    &.required::before {
      content: '* ';
      color: #ED6567;
    }
  }
  
  .section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24rpx;
    
    .section-title {
      margin-bottom: 0;
    }
    
    .add-shift-btn {
      display: flex;
      align-items: center;
      gap: 8rpx;
      color: #ED6567;
      font-size: 28rpx;
      
      .add-icon {
        font-size: 28rpx;
      }
    }
  }
  
  .form-input {
    width: 100%;
    height: 88rpx;
    line-height: 88rpx;
    padding: 0 24rpx;
    background: #f8f9fa;
    border-radius: 12rpx;
    font-size: 28rpx;
    color: #333;
    box-sizing: border-box;
  }
  
  .form-textarea {
    width: 100%;
    min-height: 200rpx;
    padding: 24rpx;
    background: #f8f9fa;
    border-radius: 12rpx;
    font-size: 28rpx;
    color: #333;
    box-sizing: border-box;
  }
  
  .char-count {
    text-align: right;
    font-size: 24rpx;
    color: #999;
    margin-top: 12rpx;
  }
}

// 岗位类型选择
.job-type-tabs {
  display: flex;
  gap: 20rpx;
  
  .type-tab {
    flex: 1;
    height: 80rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f8f9fa;
    border-radius: 12rpx;
    font-size: 28rpx;
    color: #666;
    transition: all 0.2s ease;
    
    &.active {
      background: #ED6567;
      color: white;
    }
  }
}

// 薪资设置
.salary-type-tabs {
  display: flex;
  gap: 20rpx;
  margin-bottom: 24rpx;
  
  .salary-tab {
    flex: 1;
    height: 64rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f8f9fa;
    border-radius: 8rpx;
    font-size: 26rpx;
    color: #666;
    transition: all 0.2s ease;
    
    &.active {
      background: #ED6567;
      color: white;
    }
  }
}

.salary-input-group {
  display: flex;
  gap: 20rpx;
  margin-bottom: 24rpx;
  
  .salary-input-wrapper {
    flex: 1;
    display: flex;
    align-items: center;
    background: #f8f9fa;
    border-radius: 12rpx;
    padding: 0 24rpx;
    height: 88rpx;
    
    .salary-symbol {
      font-size: 32rpx;
      color: #333;
      margin-right: 8rpx;
    }
    
    .salary-separator {
      font-size: 28rpx;
      color: #999;
      margin: 0 12rpx;
    }
    
    .salary-input {
      flex: 1;
      background: transparent;
      padding: 0;
      height: 88rpx;
      line-height: 88rpx;
    }
    
    .salary-unit {
      font-size: 24rpx;
      color: #999;
      margin-left: 8rpx;
    }
  }
}

.salary-options {
  display: flex;
  gap: 16rpx;
  
  .salary-option {
    padding: 12rpx 24rpx;
    background: #f8f9fa;
    border: 2rpx solid #ddd;
    border-radius: 40rpx;
    font-size: 26rpx;
    color: #666;
    transition: all 0.2s ease;
    
    &.active {
      background: #ffe6e6;
      border-color: #ED6567;
      color: #ED6567;
    }
  }
}

// 地点输入
.location-input-wrapper {
  display: flex;
  align-items: center;
  background: #f8f9fa;
  border-radius: 12rpx;
  padding: 0 24rpx;
  height: 88rpx;
  
  .location-icon {
    font-size: 32rpx;
    color: #ED6567;
    margin-right: 12rpx;
  }
  
  .location-input {
    flex: 1;
    background: transparent;
    padding: 0;
    height: 88rpx;
    line-height: 88rpx;
  }
}

// 职位要求
.requirement-group {
  display: flex;
  flex-direction: column;
  gap: 24rpx;
  
  .requirement-item {
    .requirement-label {
      font-size: 28rpx;
      color: #666;
      margin-bottom: 16rpx;
    }
    
    .requirement-options {
      display: flex;
      gap: 16rpx;
      
      .requirement-option {
        flex: 1;
        height: 64rpx;
        display: flex;
        align-items: center;
        justify-content: center;
        background: #f8f9fa;
        border: 2rpx solid #ddd;
        border-radius: 8rpx;
        font-size: 26rpx;
        color: #666;
        transition: all 0.2s ease;
        
        &.active {
          background: #ED6567;
          border-color: #ED6567;
          color: white;
        }
      }
    }
    
    .requirement-input {
      margin-top: 0;
    }
  }
}

// 福利选择
.benefit-list {
  display: flex;
  flex-direction: column;
  gap: 20rpx;
  
  .benefit-item {
    display: flex;
    align-items: center;
    gap: 16rpx;
    
    .benefit-checkbox {
      width: 40rpx;
      height: 40rpx;
      border: 2rpx solid #ddd;
      border-radius: 8rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      
      &.active {
        background: #ED6567;
        border-color: #ED6567;
        
        .iconfont-v2 {
          font-size: 24rpx;
          color: white;
        }
      }
    }
    
    .benefit-text {
      font-size: 28rpx;
      color: #333;
    }
  }
}

// 班次列表
.shift-list {
  display: flex;
  flex-direction: column;
  gap: 20rpx;
  
  .shift-item {
    background: #f8f9fa;
    border-radius: 12rpx;
    padding: 24rpx;
    
    .shift-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 16rpx;
      
      .shift-number {
        font-size: 28rpx;
        font-weight: 600;
        color: #333;
      }
      
      .shift-actions {
        display: flex;
        gap: 24rpx;
        
        .action-icon {
          width: 48rpx;
          height: 48rpx;
          display: flex;
          align-items: center;
          justify-content: center;
          
          .iconfont-v2 {
            font-size: 28rpx;
            color: #666;
          }
        }
      }
    }
    
    .shift-content {
      display: flex;
      justify-content: space-between;
      align-items: center;
      
      .shift-info {
        font-size: 26rpx;
        color: #666;
      }
      
      .shift-price {
        font-size: 32rpx;
        font-weight: 600;
        color: #ED6567;
      }
    }
  }
}

// 分类选择器
.picker-wrapper {
  position: relative;
  
  .form-input {
    padding-right: 60rpx;
  }
  
  .picker-arrow {
    position: absolute;
    right: 24rpx;
    top: 50%;
    transform: translateY(-50%);
    font-size: 28rpx;
    color: #999;
    pointer-events: none;
  }
}

// 底部操作栏
.bottom-action-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: white;
  padding: 30rpx;
  box-shadow: 0 -4rpx 16rpx rgba(0, 0, 0, 0.1);
  z-index: 100;
  
  .publish-btn {
    width: 100%;
    height: 88rpx;
    line-height: 88rpx;
    background: #ED6567;
    color: white;
    border: none;
    border-radius: 50rpx;
    font-size: 32rpx;
    font-weight: 600;
  }
}

// 班次编辑弹窗
.shift-modal {
  background: white;
  border-radius: 20rpx 20rpx 0 0;
  padding: 40rpx;
  
  .modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 40rpx;
    
    .modal-title {
      font-size: 36rpx;
      font-weight: 600;
      color: #333;
    }
    
    .modal-close {
      width: 60rpx;
      height: 60rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      
      .iconfont-v2 {
        font-size: 32rpx;
        color: #999;
      }
    }
  }
  
  .modal-content {
    .modal-section {
      margin-bottom: 40rpx;
      
      .modal-label {
        font-size: 28rpx;
        color: #333;
        margin-bottom: 16rpx;
        
        &.required::before {
          content: '* ';
          color: #ED6567;
        }
      }
      
      .modal-input {
        width: 100%;
        height: 88rpx;
        line-height: 88rpx;
        padding: 0 24rpx;
        background: #f8f9fa;
        border-radius: 12rpx;
        font-size: 28rpx;
        color: #333;
        box-sizing: border-box;
      }
      
      .price-input-wrapper {
        display: flex;
        align-items: center;
        background: #f8f9fa;
        border-radius: 12rpx;
        padding: 0 24rpx;
        height: 88rpx;
        
        .price-symbol {
          font-size: 32rpx;
          color: #333;
          margin-right: 8rpx;
        }
        
        .price-input {
          flex: 1;
          background: transparent;
          padding: 0;
          height: 88rpx;
          line-height: 88rpx;
        }
      }
    }
  }
  
  .modal-footer {
    display: flex;
    gap: 20rpx;
    margin-top: 40rpx;
    
    .modal-btn {
      flex: 1;
      height: 88rpx;
      line-height: 88rpx;
      border-radius: 50rpx;
      font-size: 32rpx;
      border: none;
      
      &.cancel-btn {
        background: #f0f0f0;
        color: #666;
      }
      
      &.confirm-btn {
        background: #ED6567;
        color: white;
      }
    }
  }
}
</style>

